<template>
  <div>
    <el-upload
      action="/api/sys/user/uploadFilePath"
      list-type="picture-card"
      accept=".jpg,.jpeg,.png"
      :on-preview="handlePictureCardPreview"
      :on-success="imgSuccess"
      :on-error="imgError"
      :on-remove="imgRemove"
      :class="{ hide: hideLogoUploadEdit }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper";

export default {
  components: { VueCropper },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      hideLogoUploadEdit: false,
      fileList: ""
    };
  },
  methods: {
    // 上传成功
    imgSuccess(res, file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList[0].name);
      this.$emit("myEvent",this.fileList[0].name)
      this.hideLogoUploadEdit = true;

      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },
    // 上传失败
    imgError(res) {
      this.$message({
        type: "error",
        message: "附件上传失败"
      });
    },

    // 删除图片
    imgRemove(file, fileList) {
      this.fileList = fileList;
      this.hideLogoUploadEdit = false;
    },
    // 附件上传图片预览事件，这个就是将路径直接放进一个弹窗显示出来就可以了
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 处理图片路径
    setImgUrl(imgArr) {
      let arr = [];
      if (imgArr.length > 0) {
        for (let i = 0; i < imgArr.length; i++) {
          const element = imgArr[i];
          arr.push(element.response.data.url);
          //这个地方根据后台返回的数据进行取值，可以先打印一下
        }
        return arr.join();
      } else {
        return "";
      }
    }
  }
};
</script>
<style scoped lang="scss">
.user-info-head {
  position: relative;
  display: inline-block;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
.img-lg {
  width: 50px;
  height: 50px;
}
::v-deep .el-upload-list {
  margin: 0px !important;
  width: 100px;
  display: flex;
}
/deep/.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  cursor: pointer;
  line-height: 60px;
  margin: 0px;
  vertical-align: top;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 60px;
  height: 50px;
  margin: 0px;
  display: inline-block;
}
/deep/.hide .el-upload--picture-card {
  display: none;
}
</style>
